<template>
  <div class="admin-tutorial-index">
    <div class="tutorial-index_head">
      <div class="index_head-conter">
        <h1 class="conter-text">教程中心</h1>
        <div class="inconter_head-box">
          <div class="inconter_head">
            <div class="index_head-ipt">
              <el-autocomplete popper-class="my-autocomplete" v-model="value" :trigger-on-focus="false" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect">
                <template slot-scope="{ item }">
                  <div class="name">{{ item.label }}</div>
                </template>
              </el-autocomplete>
            </div>
            <div class="index_head-icon">
              <i class="el-icon-search"></i>
            </div>
          </div>
          <div class="head-add_buts" @click="$router.push('/admin/tutorial/add')">添加</div>
        </div>
      </div>
    </div>
    <div class="index-box">
      <div class="tutorial-index_ul">
        <div class="index_ul-head">
          <div class="ul-head-title">指引与文档</div>
          <div class="ul-head-intro">产品帮助文档及常见问题</div>
        </div>
        <div class="index_ul-box">
          <div class="ul-box_left">
            <div class="left-htext">最新的</div>
            <ul class="left-ul">
              <li class="left-li" v-for="(item,index) in viewModel" :key="index" v-show="index<6" @click="$router.push('/admin/tutorial/show?id='+item.id)">
                <span class="left-span">{{item.title}}</span>
              </li>
            </ul>
            <div class="left-but" @click="$router.push('/admin/Tutorial/list')">查看所有<i class="el-icon-arrow-right"></i></div>
          </div>
          <div class="ul-box_right">
            <div class="right-li" v-show="gIndex<6" v-for="(gItem,gIndex) in classList" :key="gIndex" :style="`width: ${100/3}%;`" @click="$router.push('/admin/Tutorial/list?classId='+gItem.children[0].value)">
              <p class="right-li_head">{{gItem.label}}<i class="el-icon-right"></i></p>
              <p class="right-li_intro">{{gItem.children[0].label}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="tutorial-index_ul">
        <div class="index_ul-head">
          <div class="ul-head-title">自助服务</div>
          <div class="ul-head-intro">丰富的工具帮助您自主高效解决问题</div>
        </div>
        <ul class="self-ul">
          <li class="self-li" v-for="(sItem,sIndex) in classList" :key="sIndex" v-show="sIndex>6&&sIndex<11" @click="$router.push('/admin/Tutorial/list?classId='+sItem.children[0].value)">
            <div class="self-li_img">
              <i :class="`${iconList[sIndex]}`"></i>
            </div>
            <p class="self-li_p1">{{sItem.label}}</p>
            <p class="self-li_p2">{{sItem.children[0].label}}</p>
          </li>
        </ul>
      </div>
      <div class="tutorial-index_ul">
        <div class="index_ul-head">
          <div class="ul-head-title">热门专题</div>
          <div class="ul-head-intro"> 最新的公告与动态</div>
        </div>
        <ul class="atter-ul">
          <li class="atter-li" v-for="(reItem,reIndex) in classList" :key="reIndex" v-show="reIndex>11" @click="$router.push('/admin/Tutorial/list?classId='+reItem.children[0].value)">
            <div class="atter-li_img">
              <i :class="`${iconList[reIndex]}`"></i>
            </div>
            <div class="atter-box">
              <p class="atter-li_p1">{{reItem.label}}</p>
              <p class="atter-li_p2">{{reItem.children[0].label}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  import ala from 'ala'
  export default {
    data () {
      return {
        value: '',
        viewModel: '',
        classList: '',
        iconList: ['el-icon-more-outline', 'el-icon-menu', 'el-icon-s-order', 'el-icon-chat-dot-round', 'el-icon-folder', 'el-icon-link', 'el-icon-full-screen', 'el-icon-s-custom', 'el-icon-mobile', 'el-icon-set-up', 'el-icon-setting', 'el-icon-share', 'el-icon-share', 'el-icon-shopping-cart-full', 'el-icon-shopping-bag-1', 'el-icon-pie-chart', 'el-icon-user', 'el-icon-s-marketing', 'el-icon-star-off']
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        var repones = await ala.diyHttpGet('Api/Tutorial/QueryList')
        this.viewModel = repones
        var cArray = await ala.diyHttpGet('Api/RelationTree/GetTree?type=TutorialClassRelation')
        this.classList = cArray
      },
      querySearch (queryString, cb) {
        var restaurants = this.classList
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      createFilter (queryString) {
        return (restaurant) => {
          return (restaurant.label.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      },
      handleSelect (item) {
        this.value = item.label
        this.$router.push('/admin/Tutorial/list?classId=' + item.value)
      }
    }
  }
</script>
<style lang="scss">
  @import "./var.scss";
</style>